<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
    <style>
        .body {
            margin: 0;
            padding: 0;
            font-size: 14px;
            border: 1px solid #999999;
        }

        tr {
            line-height: 50px;
        }

        .picButton {
            /* background-image: url("../image/register_submit.gif"); */
            border: 0;
            width: 128px;
            height: 28px;
            color: skyblue;
            font-weight: bold;
        }

        .wrap {
            text-align: center;
            vertical-align: middle;
        }

        .picButton1 {
            /* position: absolute;
            left: 0; */
            border: 0;
            width: 128px;
            height: 28px;
            color: skyblue;
            font-weight: bold;
            margin-right: 100px;
            /* float: left; */
        }

        .left {
            text-align: right;
            background-color: rgb(232, 251, 255);
            width: 186px;
        }

        .center {
            border: 1px solid #000000;
            width: 173px;
            margin: 0 31px;
        }

        .right {
            color: red;
            width: 60px;
            /* display: none; */
        }

        a {
            color: #0033FF;
        }

        a:hover {
            color: #FF0000;
            text-decoration: none;
        }

        #item {
            color: red;
            font-size: 16px;
            font-weight: bold;
            line-height: 50px;
            text-align: center;
        }

        .userT {
            display: none;
        }

        .nickT {
            display: none;
        }

        .cardT {
            display: none;
        }

        .phoneT {
            display: none;
        }

        .emailT {
            display: none;
        }

        .birthdayT {
            display: none;
        }

        .passwordT {
            display: none;
        }

        .passwordT1 {
            display: none;
        }
    </style>
</head>

<body>
    <table align="center">
        <tr>
            <td>
                <form>
                    <table class="body">
                        <tr>
                            <td id="item" colspan="3">百度用户注册</td>
                        </tr>
                        <tr>
                            <td class="left">用户名:</td>
                            <td><input type="txt" class="center nick"></td>
                            <td class="right nickT">输入有误</td>
                        </tr>

                        <tr>
                            <td class="left">昵称:</td>
                            <td><input type="txt" class="center user"></td>
                            <td class="right userT">输入有误</td>
                        </tr>

                        <tr>
                            <td class="left">身份证:</td>
                            <td><input type="txt" class="center card"></td>
                            <td class="right cardT">输入有误</td>
                        </tr>

                        <tr>
                            <td class="left">Email地址:</td>
                            <td><input type="email" class="center email"></td>
                            <td class="right emailT">输入有误</td>
                        </tr>

                        <tr>
                            <td class="left">手机号:</td>
                            <td><input type="phone" class="center phone"></td>
                            <td class="right phoneT" id="sk">输入有误</td>
                        </tr>

                        <tr>
                            <td class="left">生日:</td>
                            <td><input type="txt" class="center birthday"></td>
                            <td class="right birthdayT" id="sk">输入有误</td>
                        </tr>

                        <tr>
                            <td class="left">设置密码:</td>
                            <td><input type="password" class="center password"></td>
                            <td class="right passwordT">输入有误</td>
                        </tr>

                        <tr class="wrap">
                            <td></td>
                            <td>
                                <input type="reset" class="picButton1 " value="重&ensp;置"></td>
                            <td><input type="submit" class="picButton" value="注&ensp;册"></td>
                        </tr>
                    </table>
                </form>
            </td>
        </tr>
    </table>

    <script>
        var user = document.querySelector('.user')
        var nick = document.querySelector('.nick')
        var card = document.querySelector('.card')
        var email = document.querySelector('.email')
        var phone = document.querySelector('.phone')
        var birthday = document.querySelector('.birthday')
        var password = document.querySelector('.password')

        var userT = document.querySelector('.userT')
        var nickT = document.querySelector('.nickT')
        var cardT = document.querySelector('.cardT')
        var phoneT = document.querySelector('.phoneT')
        var emailT = document.querySelector('.emailT')
        var passwordT = document.querySelector('.passwordT')
        var birthdayT = document.querySelector('.birthdayT')
        var tr = document.getElementsByTagName(tr)
        var sk = document.querySelectorAll('.right')
        function res(a, b) {
            tr.onclick = function (e) {
                var e = e || window.event
                if (e.target.className === 'right') {
                    if (!a.test(b.value)) {
                        e.target.style.display = 'block'
                    } else {
                        e.target.style.display = 'none'
                    }
                }
            }
        }

    </script>
</body>

</html>